<template>
  <div class="setting">
    <FITransfer
      class="setting-transfer"
      v-model="favorList"
      :data="noteCareList"
      :titles="['未选择的', '已选择的']"
      :props="{ key: 'processKey', label: 'processName' }"
      @change="handleChange"
    >
      <template #default="{ option }">
        <span>{{ option.processKey }} - {{ option.processName }}</span>
      </template>
      <!-- <template #default="{ option }">
        <span>{{ option.processKey }}</span>
      </template>
      <template #left-footer>
        <el-button class="transfer-footer" size="small">Operation</el-button>
      </template> -->
    </FITransfer>
    <FIButton type="primary" :loading="saveLoading" @click="saveMyFavorTask">保存</FIButton>
  </div>
</template>
<script setup lang="ts">
import FITransfer from '@/components/FITransfer.vue'
import { ref, onMounted, reactive, toRefs } from 'vue'
import { apiRequestPost } from '@/api/globalApi.js'
import LocalCache from '@/utils/cache'
import { useMessage } from '@/hooks/message'

const props = defineProps({
  optins: {
    type: Array,
    default: () => [],
  },
})
const emits = defineEmits(['close', 'update:visible', 'confirm', 'save-ok'])
const modelValue = ref('')
const userData = LocalCache.getCache('user')
const loginName = userData.loginName
// const dataArr = ref(props.optins)
const favorList = ref([])
const noteCareList = ref([])
const getMyFavorTask = () => {
  apiRequestPost('/bpm-service/MyFavorTaskService/queryMyFavorProcess', { userId: loginName }).then((res) => {
    if (res.data.success) {
      if (Array.isArray(res.data.data.favorite) && res.data.data.favorite.length > 0) {
        res.data.data.favorite.forEach((item) => {
          favorList.value.push(item?.processKey)
        })
      }
      noteCareList.value = [...res.data.data.nodecode, ...res.data.data.favorite]
      console.log('-------------------0001', favorList.value, noteCareList.value)
    }
  })
}
const saveLoading = ref(false)
const saveMyFavorTask = () => {
  // 筛选出 key 存在于 favorListValue 中的对象
  const filteredList = noteCareList.value.filter((item) => {
    return favorList.value.includes(item.processKey)
  })

  const obj = {
    userId: loginName,
    favorite: filteredList,
  }
  saveLoading.value = true
  apiRequestPost('/bpm-service/MyFavorTaskService/saveMyFavorProcess', obj)
    .then((res) => {
      saveLoading.value = false
      if (res.data.success) {
        useMessage().success('保存成功')
      }
    })
    .catch((err) => {
      saveLoading.value = false
      console.log('err', err)
    })
}
const handleChange = (e) => {
  console.log('--------------000022', e, noteCareList.value, favorList.value)
}
onMounted(() => {
  getMyFavorTask()
})
</script>
<style lang="less" scoped>
.setting {
  width: 100%;
  margin: 30px auto;
  text-align: center;
}
.setting-transfer {
  margin-bottom: 30px;
  --el-transfer-panel-width: 400px;
}
</style>
